<template>
  <div class="dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>仪表盘</h1>
      <p>欢迎回到个人作品集管理平台</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="stat in stats" :key="stat.title">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :style="{ background: stat.color }">
              <el-icon :size="24" :color="stat.iconColor">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stat.value }}</h3>
              <p>{{ stat.title }}</p>
              <span :class="['stat-trend', stat.trend > 0 ? 'positive' : 'negative']">
                {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表和数据 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目统计</span>
              <el-button-group>
                <el-button size="small" :type="chartPeriod === 'week' ? 'primary' : 'default'" @click="chartPeriod = 'week'">周</el-button>
                <el-button size="small" :type="chartPeriod === 'month' ? 'primary' : 'default'" @click="chartPeriod = 'month'">月</el-button>
                <el-button size="small" :type="chartPeriod === 'year' ? 'primary' : 'default'" @click="chartPeriod = 'year'">年</el-button>
              </el-button-group>
            </div>
          </template>
          
          <div class="chart-placeholder">
            <el-icon :size="60" color="#ccc">
              <TrendCharts />
            </el-icon>
            <p>图表数据展示区域</p>
            <small>这里可以集成 ECharts 等图表库</small>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span>最近活动</span>
          </template>
          
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <div class="activity-icon">
                <el-icon :color="activity.color">
                  <component :is="activity.icon" />
                </el-icon>
              </div>
              <div class="activity-content">
                <p class="activity-title">{{ activity.title }}</p>
                <p class="activity-time">{{ activity.time }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 快捷操作 -->
    <el-row :gutter="20" class="actions-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <span>快捷操作</span>
          </template>
          
          <div class="quick-actions">
            <div 
              v-for="action in quickActions" 
              :key="action.title"
              class="action-item"
              @click="handleQuickAction(action)"
            >
              <el-icon :size="32" :color="action.color">
                <component :is="action.icon" />
              </el-icon>
              <span>{{ action.title }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  FolderOpened, 
  Star, 
  Briefcase, 
  School,
  TrendCharts,
  Plus,
  Edit,
  View,
  Setting
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 图表时间周期
const chartPeriod = ref('month')

// 统计数据
const stats = ref([
  {
    title: '项目总数',
    value: '12',
    trend: 8.5,
    icon: 'FolderOpened',
    color: '#e1f3fe',
    iconColor: '#409eff'
  },
  {
    title: '技能标签',
    value: '28',
    trend: 15.2,
    icon: 'Star',
    color: '#fef0f0',
    iconColor: '#f56c6c'
  },
  {
    title: '工作经历',
    value: '5',
    trend: 0,
    icon: 'Briefcase',
    color: '#f0f9ff',
    iconColor: '#67c23a'
  },
  {
    title: '教育背景',
    value: '3',
    trend: -5.1,
    icon: 'School',
    color: '#fdf6ec',
    iconColor: '#e6a23c'
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    title: '更新了项目「电商管理平台」',
    time: '2 小时前',
    icon: 'Edit',
    color: '#409eff'
  },
  {
    id: 2,
    title: '添加了新技能「Vue 3」',
    time: '4 小时前',
    icon: 'Plus',
    color: '#67c23a'
  },
  {
    id: 3,
    title: '查看了项目「实时协作白板」',
    time: '1 天前',
    icon: 'View',
    color: '#e6a23c'
  },
  {
    id: 4,
    title: '修改了个人信息',
    time: '2 天前',
    icon: 'Edit',
    color: '#f56c6c'
  }
])

// 快捷操作
const quickActions = ref([
  {
    title: '新增项目',
    icon: 'Plus',
    color: '#409eff',
    action: 'add-project'
  },
  {
    title: '编辑资料',
    icon: 'Edit',
    color: '#67c23a',
    action: 'edit-profile'
  },
  {
    title: '技能管理',
    icon: 'Star',
    color: '#e6a23c',
    action: 'manage-skills'
  },
  {
    title: '系统设置',
    icon: 'Setting',
    color: '#909399',
    action: 'settings'
  }
])

// 处理快捷操作
const handleQuickAction = (action) => {
  ElMessage.info(`执行操作: ${action.title}`)
  
  switch (action.action) {
    case 'add-project':
      // 跳转到项目页面并新增
      break
    case 'edit-profile':
      // 跳转到个人资料页面
      break
    case 'manage-skills':
      // 跳转到技能管理页面
      break
    case 'settings':
      // 跳转到设置页面
      break
  }
}
</script>

<style scoped>
.dashboard {
  padding: 0;
}
</style>